<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<title>首页</title>
    <meta name="decorator" content="cms_default_${fns:getConfig('site.theme')}"/>
    <meta name="description" content="河狸家教育平台" />
    <meta name="keywords" content="教育平台 在线教育 视频图文" />
    
    <link rel="stylesheet" href="${ctxStaticTheme}/css/style-tmt.css">
	<link rel="stylesheet" href="${ctxStaticTheme}/css/xunzong.css"/>
	<style type="text/css">
		@media screen and (max-width: ${fnc:getMainContentLength()}px) { 
			.xz-headerbar-width {width: ${fnc:getMainContentLength()}px} 
		}
		@media screen and (min-width: ${fnc:getMainContentLength()-40}px) { 
			.zx-btnrow-w {display:none} 
		}
	</style>
	<script type="text/javascript" src="${ctxStaticTheme}/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="${ctxStaticTheme}/js/swipe.min.js"></script>
	<script type="text/javascript" src="${ctxStaticTheme}/js/layer.m.js"></script>
	<script type="text/javascript" src="${ctxStaticTheme}/js/common.js"></script>
	
</head>
<body>
<div id="maindiv" style="z-index:88;">
<!---- -- -- -- -顶部导航 -- -- -- -- -- -- -- -->
<div class="xz-headerbar xz-headerbar-width" style="text-align:left">
<!-- 76 -->
<div id="line" ><c:forEach items="${fnc:getMainNavList()}" var="category" varStatus="status"><c:choose><c:when test="${status.index == 0}"><c:set var="allId" value="${category.id}"/><script>allId = "${category.id}";</script><a class="xz-headnav xz-selected" categoryId="${category.id}">${category.name}</a></c:when><c:otherwise><a class="xz-headnav"  categoryId="${category.id}">${category.name}</a></c:otherwise></c:choose></c:forEach></div><a class="zx-btnrow-w" id="btndownicon" href="javascript:void(0)"><span class="zx-btndownicon-w"></span></a><a class="zx-btnrow-w" id="btnupicon" href="javascript:void(0)" style="display: none"><span class="zx-btnupicon-w"></span></a><a class="xz-btn-search" href="javascript:void(0)" ><span class="xz-btn-searchicon"></span></a>
</div>
<div id="menuDiv" style="display:none">
<div class="xz-headnav2openmask xz-headnavopen" > </div>
<div  class="xz-headnav2openmenu xz-headnavopen" >
<c:forEach items="${fnc:getMainNavList()}" var="category" varStatus="status">
<c:choose>
<c:when test="${status.index == 0}">
  <a  class="xz-btn xz-btn-selected"  href="javascript:void(0)" categoryId="${category.id}">${category.name}</a>
</c:when>
<c:otherwise>
   <a  class="xz-btn"  href="javascript:void(0)" categoryId="${category.id}">${category.name}</a>
</c:otherwise>
</c:choose>
</c:forEach>
 </div>

</div>
<!---- -- -- -- --底部导航 -- -- -- -- -- -- -- -->
<div class="xz-bottombar" >
  <a class="xz-bottomnav xz-selected" href="javascript:void(0)" ><span class="xz-bottomnavicon xz-bottomnavicon-classcenter"></span><span class="xz-bottomnavtext" >课程中心</span></a>
  <a class="xz-bottomnav" href="${ctx}/myCourse${urlSuffix}?artisan_id=${artisan_id}&token=${token}"><span class="xz-bottomnavicon xz-bottomnavicon-myclass"></span><span class="xz-bottomnavtext" >我的课程</span></a>
</div>

<!---- -- -- -- --主内容 -- -- -- -- -- -- --style="top:182px" -->
<div class="xz-contants" id="mainContent" >

<div class="xz-pop">
        <!-- 滚动代码结束-->
        <!-- -->
		 <div id="slider" class="swipe">
		  <div class="swipe-wrap">
		  	<c:forEach var="bananer" items="${bananerList}" varStatus="status">
		    	<div><a href="${bananer.url}?artisan_id=${artisan_id}&token=${token}"><img src="${bananer.image}"  style="width:320px; height:138px" alt=""  /></a></div>
		  	</c:forEach>
		  </div>
		  <div class="rsBullets" id="position">
		  	 <c:forEach var="bananer" items="${bananerList}" varStatus="status">
		  	 	<c:choose>
		  	 		<c:when test="${status.index == 0 }">
		  	 			<div class="rsBullet rsNavSelected"><span></span></div>
		  	 		</c:when>
		  	 		<c:otherwise>
		  	 			<div class="rsBullet"><span></span></div>
		  	 		</c:otherwise>
		  	 	</c:choose>
		  	 </c:forEach>
		  </div>
		</div>
</div>

<div class="xz-bigbtngroup"  >
<c:forEach var="category" items="${fnc:getCategoryList(allId, 3, '')}" varStatus="status">
<c:if test="${status.index == 0 }">
<a class="xz-bigbtn1" href="${category.url}?artisan_id=${artisan_id}&token=${token}"><img src="${ctxStaticTheme}/css/imgs/icon-newclass.png" width="70" height="52" /> <span class="xz-bigbtn1title">${ category.name}</span><span class="xz-bigbtn1info">${category.description}</span> </a>
</c:if>
<c:if test="${status.index == 1 }">
<a  class="xz-bigbtn2" href="${category.url}?artisan_id=${artisan_id}&token=${token}"> <img src="${ctxStaticTheme}/css/imgs/icon-saleclass.png" width="37" height="37" style="margin-right:10px;" /><span  class="xz-bigbtn2title">${ category.name}</span><span  class="xz-bigbtn2info">${category.description}</span></a>
</c:if>
<c:if test="${status.index == 2 }">
<a class="xz-bigbtn3" href="${category.url}?artisan_id=${artisan_id}&token=${token}"> <img src="${ctxStaticTheme}/css/imgs/icon-info.png" width="37" height="37" style="margin-right:10px;" /><span  class="xz-bigbtn3title">${ category.name}</span><span  class="xz-bigbtn3info">${category.description}</span></a>
</c:if>
</c:forEach>
</div>
<div class="xz-contantend">
<ul class="tmt-list tmt-list_box jrpop tmt-list_icon" id="kccontent"></ul>
</div>
<div id="infscr-loading"><img alt="Loading..." src="${ctxStaticTheme}/css/imgs/loading.gif"><span> </span></div>
</div>
</div>
<script type="text/javascript">
var bullets = $('.rsBullet');
window.mySwipe = new Swipe(document.getElementById('slider'), {
  speed: 400,
  auto: 2000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {
	  bullets.removeClass('rsNavSelected');
	  $(bullets[index]).addClass('rsNavSelected');
  },
  transitionEnd: function(index, elem) {}
});
</script>
<div id="serachdiv" style="z-index:99;display:none" >
    <!---- -- -- -- -顶部导航 -- -- -- -- -- -- -- -->
    <div class="xz-headerbar xz-serachbar" >
    <div  class="xz-searchgroup">
    <form action="${ctx}/search" id="searchForm" method="post">
    	<input name="q" id="searchWord" type="search"  class="xz-searchinput" />
    	<input type="hidden" name="artisan_id" value="${artisan_id}"/>
    	<input type="hidden" name="token" value="${token}"/>
    </form>
    </div>
    <a class="xz-btncancel" >取消</a>
    </div>
    
    <!---- -- -- -- --主内容 -- -- -- -- -- -- -- -->
    <div class="xz-contants xz-insert" >
      <c:forEach var="dict" items="${fns:getDictList('search_keyword')}" varStatus="status">
      	<a  class="xz-btn" href="javascript:void(0)">${dict.label}</a>
      </c:forEach> 
    </div>
</div>
<script type="text/javascript" src="${ctxStaticTheme}/js/loadContent.js?111"></script>
<script type="text/javascript" src="${ctxStaticTheme}/js/toucher.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		var lineSize = ${fnc:getMainContentLength()};
		var linelen = lineSize-76;
		var viewlen= window.innerWidth-76;
		var maxlen = linelen-viewlen;
		var maxbit =0- maxlen/lineSize*100;
		$('.xz-headnav').click(function(){
			$('.xz-headnav').removeClass('xz-selected');
			$(this).addClass('xz-selected');
			categoryId = $(this).attr('categoryId');
			$('.xz-headnav2openmenu .xz-btn').removeClass('xz-btn-selected');
			$('.xz-headnav2openmenu .xz-btn[categoryId='+categoryId+']').addClass('xz-btn-selected');
			if(allId == categoryId){
				$('.xz-pop').show();
				$('.xz-bigbtngroup').show();
				//$('#mainContent').css('top','182px');
			}else{
				$('.xz-pop').hide();
				$('.xz-bigbtngroup').hide();
				//$('#mainContent').css('top','44px');
			}
			if(lineSize>window.innerWidth){
				var width =  $(this).outerWidth();
				var left = $(this).position().left;
				//var left3 = $(this).css('width');
				var right = window.innerWidth-left-width;
				var pos = (window.innerWidth-width)/2;
				var leftlen = pos-left;
				//alert(right);
				if(leftlen < 0){
					//left
					myTransform((leftlen*100)/lineSize,"left");
				}else if(leftlen > 0){
					//Right
					myTransform((right-pos)*100/lineSize,"right");
					
				}
			}
			
			//alert("width:"+width+"left:"+left+"right:"+right);
			init(categoryId);
		});
		//$('.xz-pop').hide();
		//$('.xz-bigbtngroup').hide();
		$('.xz-btn-search').click(function(){
			$('#maindiv').hide();
			$('#serachdiv').show();
		});
		$('.xz-btncancel').live("click",function(){
			$('#maindiv').show();
			$('#serachdiv').hide();
		});
		$('.zx-btnrow-w').live("click",function(){
			$('#menuDiv').toggle("fast");
			$('.zx-btnrow-w').toggle(1000);
		});
		$('.xz-contants .xz-btn').click(function(){
			var searchWord = $(this).text();
			$('#searchWord').val(searchWord);
			//alert(1);
			$('#searchForm').submit();
			//TODO 提交
		});
		init(allId);
		$(document).scroll(function(){
			var bottom_padding=$(document).height()-$(document).scrollTop()-$(window).height();
			//&& !loading_flag&&!loadingFinish
			if(bottom_padding<50){
				//console.log(bottom_padding);
				loadCotent();
			}
		});
		
		var x = 0;
		function myTransform(t,direction){
			x+=t;
			if("left" == direction){
				if(x < maxbit){
					x = maxbit;
				}
			}else{
				if(x > 0){
					x=0;
				}
			}
			$('#line').css({'-webkit-transform':"translate("+x+"%)",'-webkit-transition':'200ms linear'} );
		}
		
		if(lineSize>window.innerWidth){
			util.toucher(document.querySelector('#line')).on('swipeLeft',function(e){
				//x += ;
				myTransform(e.moveX,"left");
			}).on('swipeRight',function(e){
				//x += e.moveX;
				myTransform(e.moveX,"right");
			});
			
			$('.xz-headnav2openmenu .xz-btn').click(function(){
				$('.xz-headnav2openmenu .xz-btn').removeClass('xz-btn-selected');
				$(this).addClass('xz-btn-selected');
				$('#menuDiv').fadeOut("normal");
				$('#btndownicon').fadeIn("normal");
				$('#btnupicon').fadeOut("normal");
				categoryId = $(this).attr('categoryId');
				$('.xz-headnav[categoryId='+categoryId+']').click();
				//btnupicon
				//
			});
			
		}
		//window.addEventListener("resize", function() {
		    // window.innerWidth IE9+浏览器支持
		    //if (window.innerWidth <= 1024) {
		        // 普屏处理
		   // } else {
		        //宽屏处理
		  //  }
		    //console.log(window.innerWidth);
		//});
	});
	
</script>
</body>
</html>